<template>
<div  class="body-bg">
	<div class="login-main">
		<h2 class="site-title">{{site_title}}</h2>
		<el-form ref="login" :model="login" size="medium" :rules="loginRules" class="login-form" label-position="left" >
			<el-form-item style="margin-bottom:18px;" prop="username">
				<el-input v-model="login.username"  type="text" placeholder="用户名" prefix-icon="el-icon-user" autocomplete="off" clearable />
			</el-form-item>
			<el-form-item style="margin-bottom:18px;" prop="password">
				<el-input v-model="login.password"  type="text" placeholder="密码" prefix-icon="el-icon-lock" @keyup.enter.native="handleLogin" autocomplete="off" clearable show-password/>
			</el-form-item>
			<el-form-item style="margin-bottom:18px;" prop="verify" v-if="verify_status">
				<el-col :span="13">
					<el-input v-model="login.verify"  type="text" placeholder="验证码" prefix-icon="el-icon-picture" @keyup.enter.native="handleLogin" autocomplete="off" clearable/>
				</el-col>
				<el-col :span="11">
					<el-image :src="verifySrc"  alt="验证码" title="点击刷新验证码" @click="refeshVerifySrc" style="width:108px;height:35px; margin-top:3px;float:right" />
				</el-col>
			</el-form-item>
		</el-form>
		<el-button :loading="loading" size="small"  type="primary" style="width:100%;" @click.native.prevent="handleLogin">
			<span v-if="!loading">登 录</span>
			<span v-else>登 录 中...</span>
		</el-button>
	</div>
</div>
</template>

<script>
export default {
  data: function() {
		return {
			loading: false,
			login:{
				username:'',
				password:'',
				verify:'',
				key:'',
			},
			site_title:'',
			success_url:'',
			loginRules: {
				username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
				password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
				captcha: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
			},
			verify_status:true,
			verifySrc:'',
		}
	},
	mounted(){
		this.captch()
	},
	methods:{
		captch(){
			this.$axios.post('/admin/Login/verify').then(res => {
				if(res.data.status == 200){
					this.site_title = res.data.site_title
					this.success_url = res.data.success_url
					this.verifySrc = res.data.data.base64
					this.login.key = res.data.data.key
					this.verify_status = res.data.verify_status
				}else{
					this.$message.error('验证码获取失败!')
				}
			})
		},
		refeshVerifySrc() {
			this.captch()
		},
		handleLogin(){
			this.$refs['login'].validate(valid => {
				if(valid){
					this.loading = true
					this.$store.dispatch('login',this.login).then(()=>{
						this.$router.push(this.success_url)
						this.loading = false
					}).catch(() => {
						this.loading = false
						this.captch()
					})
				}
			})
		}
	},
}
</script>

<style scoped>
  .body-bg{
    position: absolute;
    height: 100%;
    width: 100%;
    top:0;
    left: 0;
    overflow-y: auto;
    background:url(../../../assets/images/denglu.png) top center ;
    align-items: center;
    background-size: cover;
  }

  .login-main{
    z-index: 1;
    background-color: #FFF;
    border-radius: 1em;
    border: 1px solid #fff;
    width: 320px;
    margin: 150px auto;
    padding: 10px 20px 30px 20px;
  }

  .site-title{
    font-weight: bold;
    font-size: 18px;
    text-align: center;
    color:#707070;
    margin-bottom: 20px;
    padding-top: 30px;
  }


</style>
